<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { whManagerBsTbParkGridPatrolRecordCompletePatrolUsingPost, whManagerBsTbRiskHazardsHandleAppSaveUsingPost, whManagerBsTbThirdUnitGetAppPageUsingPost } from '@/genapi/wh';
import { useUserStore } from '@/stores/user';

const record = ref(['1', '2']);

// const type = computed(() => {
// 	const res = unitColumns1.value.find((item) => {
// 		return item.value === formData.value.type;
// 	});
// 	return res?.text;
// });
const userStore = useUserStore();
const router = useRouter();
function returnClick() {
	router.replace('/home');
}

function commitClick() {
  finishInspect.value.id = router.currentRoute.value.query.id
  // console.log(router.currentRoute.value.query.id)
  // console.log(finishInspect.value)
	whManagerBsTbParkGridPatrolRecordCompletePatrolUsingPost(finishInspect.value).then((res) => {
		alert(res.message);
    router.replace('/home')
	});
}
// const fileList = ref([]);
// const formData = ref({
//   id:'',
//   list: [
//     {
//       fileIdList: [],
//       patrolContent: ""
//     }
//   ],
// })
function deleteImg(files, fileList, index) {
	// formData.value.splice(files.index, 1);
  finishInspect.value.list[0].fileIdList.splice(files.index,1)
  console.log(finishInspect.value.list[0].fileIdList)
}
function deleteImg2(files, fileList, index) {
	// formData.value.splice(files.index, 1);
  finishInspect.value.list[1].fileIdList.splice(files.index,1)
}
let finishInspect = ref({
  id: userStore.userInfo?.userId,
  list: [
    {
      fileIdList: [],
      patrolContent: ""
    },
    {
      fileIdList: [],
      patrolContent: ""
    }
  ]
})
function handleSuccess(responseText) {
  let res = JSON.parse(responseText.responseText)
  finishInspect.value.list[0].fileIdList.push(res.data.id)
  // console.log(finishInspect.value.list[0].fileIdList)
}

function handleSuccess2(responseText) {
  let res = JSON.parse(responseText.responseText)
  finishInspect.value.list[1].fileIdList.push(res.data.id)
  
	// formData.value.riskHazardsIdList.push(JSON.parse(responseText.responseText).data.id);
}
</script>

<template>
	<div class="header bg-[#ffffff]" h-28 flex flex-col justify-center items-center>
		<div pt-5>
			<img src="./assets/return.png" alt="" h-5 w-5 @click="returnClick" absolute left-4 />
			<span>执行任务记录</span>
		</div>
		<div class="titleContent" px-4>
			<div><span>执行记录</span><span style="color: #909399">（2条）</span></div>
			<nut-button type="info" size="mini" shape="square" @click="router.replace({ path: '/home/createTask' })"
				>新增</nut-button
			>
		</div>
	</div>
	<div class="body bg-[#F5F7FB]">
		<div
			flex
			border-b
			border-solid
			class="border-[#E3E4E5] bg-[#ffffff]"
			mt-2
			flex-col
		>
			<nut-form>
				<div pl-4 border-b pb-4>记录1</div>
				<nut-form-item>
					<div class="validity-upload-title" mb-2>情况描述</div>
					<nut-textarea placeholder="请输入" type="text" v-model="finishInspect.list[0].patrolContent"/>
				</nut-form-item>
				<nut-form-item>
					<div class="validity-upload-title" mb-5>上传文件</div>
					<nut-uploader
						accept="image/*"
						is-deletable
						class="validity-uploader"
						url="/whManager/system/systemFile/upload"
						:headers="{
							Authorization: userStore.authorization,
						}"
						maximum="3"
						multiple
						@delete="deleteImg"
						@success="handleSuccess"
					></nut-uploader>
				</nut-form-item>
			</nut-form>
      <nut-form>
				<div pl-4 border-b pb-4>记录2</div>
				<nut-form-item>
					<div class="validity-upload-title" mb-2>情况描述</div>
					<nut-textarea placeholder="请输入" type="text" v-model="finishInspect.list[1].patrolContent"/>
				</nut-form-item>
				<nut-form-item>
					<div class="validity-upload-title" mb-5>上传文件</div>
					<nut-uploader
						accept="image/*"
						is-deletable
						class="validity-uploader"
						url="/whManager/system/systemFile/upload"
						:headers="{
							Authorization: userStore.authorization,
						}"
						maximum="3"
						multiple
						@delete="deleteImg2"
						@success="handleSuccess2"
					></nut-uploader>
				</nut-form-item>
			</nut-form>
		</div>
		<div p-2 class="bg-[#fff]">
			<nut-button block class="create-unit-submit-button" @click="commitClick"> 完成巡查 </nut-button>
		</div>
	</div>
</template>

<style scoped lang="scss">
:deep(.nut-cell-group__wrap) {
	box-shadow: none;
}
:deep(.nut-input--border) {
	border-bottom: none;
}
.header {
	.titleContent {
		width: 100%;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		span {
		}
	}
	span {
		color: #1c2023;
		text-align: center;
		font-style: normal;
	}
}

.body {
	height: calc(100% - 112px);
	overflow-y: scroll;
}
.create-unit-submit-button {
	height: 35px;
	font-size: 14px;
	color: #fff;
	background: #165dff;
	border: 1px solid #034196;
	border-radius: 16px;
}
.validity-upload-title {
	font-size: 14px;
	color: #000;
}
:deep(.nut-form-item__body__slots .nut-textarea .nut-textarea__textarea) {
	display: block;
	height: 100px;
	padding-top: 4px;
	padding-left: 4px;
	background-color: #f5f7fb;
}
</style>
